<template>
  <div class="top_banner" id="top_banner">
    <div class="add" @click="addHot">添加</div>
    <div class="remove" @click="removeHot" v-show="inputNodeLength > 1">删除</div>
    <div class="top-item-tt" v-for="(item, index) in dataList" :key="index">
      <p>热门搜索{{ index + 1 }}</p>
      <input type="text" class="hot-value" :value="item">
    </div>
    <div class="noData" v-show="inputNodeLength < 1">
      当前没有数据，请添加按钮
    </div>
  </div>
</template>
<script>
export default {
  name: "hotSearch",
  data() {
    return {
      dataList: [],
      inputNodeLength: 1,
    }
  },
  mounted() {
    this.top_banner_node = document.querySelector("#top_banner");
  },
  methods: {
    removeHot() {
      const inputNode = document.querySelectorAll(".top-item-tt");
      inputNode[inputNode.length - 1].remove();
      this.inputNodeLength--;
    },
    getAllInput() {
      const dataArray = [];
      const allNode = document.querySelectorAll(".hot-value");
      allNode.forEach(item => {
        if (!!item.value) {
          dataArray.push(item.value)
        }
      })
      return dataArray;
    },
    addHot() {
      this.inputNodeLength++;

      const itemNode = document.createElement("div");
      itemNode.classList.add("top-item-tt");

      const pNode = document.createElement("p");
      pNode.innerHTML = "热门搜索" + this.inputNodeLength;

      const inputNode = document.createElement("input");
      inputNode.classList.add("hot-value");

      itemNode.appendChild(pNode);
      itemNode.appendChild(inputNode);

      this.top_banner_node.appendChild(itemNode);
    }
  }
}
</script>
<style lang="scss">
.top_banner {
  display: flex;
  flex-direction: column;
  position: relative;

  .add,
  .remove {
    position: absolute;
    right: -15px;
    top: 0px;
    font-size: 14px;
    cursor: pointer;
    transition: all .5s;
    padding: 4px 10px;
    border: 1px solid transparent;
    user-select: none;
    border-radius: 2px;

    &:hover {
      color: #2993ff;
      border: 1px solid #2993ff;
    }
  }

  .remove {
    top: 30px;

    &:hover {
      color: #e14343;
      border: 1px solid #e14343;
    }
  }

  .top-item-tt {
    margin-bottom: 10px;

    p {
      font-size: 12px;
      margin-bottom: 10px;
    }

    input {
      outline: 0;
      border-radius: 3px;
      width: 200px;
      height: 30px;
      padding: 5px;
      box-sizing: border-box;
      font-size: 12px;
      border: 1px solid #eeeeee;
    }
  }

  .noData {
    height: 100px;
    text-align: center;
    font-size: 14px;
    color: #ff9f37;
    user-select: none;
    line-height: 100px;
  }
}
</style>